require(['./config'], ()=> {
  require(['template','request','url','easyui','header','footer'], (template,request,url)=> {
    class Index {
      constructor(){
        this.getCategory()
        this.carousel()  
        this.getMoreGoods()
      }

      getCategory () {
        $.get('/libs/json/indexCategory.json', resp =>{
          this.renderCategroy(resp)
        })
      }
      renderCategroy (list) {
        const html = template('categoryTemplate',{ list })
        // console.log(html)
        $('#categoryList').html(html)
      }

           //完成轮播效果
     carousel() {
      $('#carousel ul li').width($('#carousel').width());
      var $lis =$('#carousel ul li'),//获取li
           len =$lis.length,//li的总个数
           width=$lis.width(),//一个li的宽度
           lastIndex = 0,
           index = 0;
           console.log(width)
     //创建按钮并绑定事件
     for(var i=0;i<len;i++){
       $(`<li></li>`).addClass(i===0 ? 'ac':'').appendTo('#carousel ol').on('click',function(){
         lastIndex=index;
         index = $(this).index()//在jq中 有index属性===>点哪个元素即指向该元素的下标
         console.log(index)
         $('#carousel ul').animate({
           left: -index * width
         },1000)
         $('#carousel ol li').eq(lastIndex).removeClass('ac')
         $('#carousel ol li').eq(index).addClass('ac')
       })
     }
     //末尾追加图片
     $lis.eq(0).clone().appendTo('#carousel ul')
     //计算ul的宽度
     $('#carousel ul').width((len+1)*width)
     //向后切换
     $('#goNext').on('click',function(){
       lastIndex = index
       index++
       if(index===len){
         $('#carousel ul').animate({
           left: -len * width
         },1000, ()=>{
           $('#carousel ul').css({left:0})
         })
         index=0;
       }else{
         $('#carousel ul').animate({
           left: -index * width
         },1000)
       }
       $('#carousel ol li').eq(lastIndex).removeClass('ac')
       $('#carousel ol li').eq(index).addClass('ac') 
     })
     // 向前
       $('#goPrev').on('click', function () {
         lastIndex = index;
         index--;
         if (index < 0) {
           index = len - 1;
           $('#carousel ul').css({left: -len * width})
         }
         $('#carousel ul').stop().animate({
           left: -index * width
         }, 1000)
         $('#carousel ol li').eq(lastIndex).removeClass('ac')
         $('#carousel ol li').eq(index).addClass('ac')
       })
     }
     getMoreGoods(){
        let currPage=1,//当前页为1
        allNum,//总数据条数
        pageSize =3,//每页显示数据条数
        prevBtn=$('#prevBtn'),//前一页按钮
        nextBtn=$('#nextBtn'),//下一页按钮
        allPageHtml = $('#allPage'),
        currPageHtml=$('#currPage'),
        allPageNum = 0,
        currData = [];
       $.get(`${url.rap2BaseUrl}/index`,resp=>{
         console.log(resp)
         if(resp.code===200){
            currData=resp.body.list.slice((currPage -1)*pageSize,currPage*pageSize)
            console.log(currData)
            $('#moreGoodsList').html(template('moreGoodsTemplate',{currData}))
            nextBtn.on('click', () => {
              allNum = resp.body.list.length;//30
              console.log(allNum)
              allPageNum=allNum/pageSize
              allPageHtml.html(allPageNum,currPage)
              if(currPage !== allPageNum) {
                  currPage ++
                  currData = resp.body.list.slice((currPage - 1)  * pageSize, currPage * pageSize)
                  console.log(currData) 
                  $('#moreGoodsList').html(template('moreGoodsTemplate',{currData}))
                  currPageHtml.html(currPage)
              }
            })
            prevBtn.on('click', () => {
              if(currPage > 1) {
                currPage --
                currData = resp.body.list.slice((currPage - 1)  * pageSize, currPage * pageSize)
                console.log(currData)
                $('#moreGoodsList').html(template('moreGoodsTemplate',{currData}))
                currPageHtml.html(currPage)
              }
            })

         }
        //  allNum = resp.body.list.length;//30
        //   console.log(allNum)
        //   allPageNum=allNum/pageSize
        //   allPageHtml.html(allPageNum,currPage)
        //   currData=resp.body.list.slice((currPage -1)*pageSize,currPage*pageSize)
        //   nextBtn.on('click', () => {
        //     if(currPage !== allPageNum) {
        //         currPage ++
        //         currData = resp.body.list.slice((currPage - 1)  * pageSize, currPage * pageSize)
        //         console.log(currData) 
        //     }
        // })
        // prevBtn.on('click', () => {
        //     if(currPage > 1) {
        //         currPage --
        //         currData = resp.body.list.slice((currPage - 1)  * pageSize, currPage * pageSize)
        //         console.log(currData)
        //     }
        // })
       })
     }
      
    }
    new Index()
  })
})